<template>
	<view class="header">
		<view class="text-and-image">
			<view class="text-container">
				<text>{{userName}}</text>
			</view>
			<view class="image-container">
				<image :src="userImg">
				</image>
			</view>
		</view>
	</view>	
<!-- 	
		<fui-list padding="['10px', '32rpx', '20rpx', '32rpx']" borderColor=#ffffff topBorder=false>
			<view @click="goMyOrderIndex">
				<fui-list-cell topBorder=false arrow >
					<image src="https://zjdemo.xuande.work:8889/photo/089b9d68057e4906916a7a40b3fa3e55.png" class="icon-image"></image>
					<text  style="margin-top: -5px;">我的订单</text>
				</fui-list-cell>
			</view>
		</fui-list> -->
	
	
	
<tabbar selectedIndex=1></tabbar>
	<!--    <view class="foot">
    </view> -->
</template>

<script>
	import {
		url
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				pgList: [0],
				userImg: '',
				userName: '',
				userIntegral: '',
				getOpenId: '',
				Lists: []
			}
		},

		onLoad() {
			const that = this;
			uni.getStorage({
				key: 'openId',
				success(res) {
					that.getOpenId = res.data
				
					uni.request({
						url: url + '/wx/selectUserByOpenId', // Example URL, replace with the real one.
						data: {
							openId: that.getOpenId
						},
						success(res) {
							that.userImg = res.data.data.userImg;
							that.userName = res.data.data.userName;
							that.userIntegral = res.data.data.userIntegral;
							that.setProgress(res.data.data.userIntegral);
 
						}
					});
				},
				fail(err) {
					console.error('Failed to get storage:', err)
				}
			})

		},


		onShow() {

			if (this.userIntegral) {
				this.setProgress(this.userIntegral);
			}
		},
		methods: {
			// Set progress bar progress
			setProgress(integral) {
				this.pgList = [integral * 0.001]; // Adjust this logic as needed
			},
			goMyOrder() {
				uni.redirectTo({
					url: '../qishoudingdan/qishoudingdan'
				});
			},
			goMyOrderIndex(){
				uni.navigateTo({
					url:'../qishouorder/qishouorder'
				})
			}
	
		}
	}

</script>


<style scoped>
	.orders {
	    border-radius: 10px;
	    margin: 10px 10px 0px;
	    padding: 13px 0px 0px;
	    height: 189px;
	    background-color: white;
	}
	.icon-image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 6px;
	}
	.zhika {
		color: #803c00;
		margin-top: 20px;
		/* Increased margin-top for larger spacing */
	}

	.progress-container {
		margin-top: 10px;
		width: 100%;
		height: 20px;
		margin-bottom: 30px;
		/* Increased margin-bottom for larger spacing */
	}

	.progress-container .text-inline {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		/* Increased margin-top for larger spacing */
	}

	.progress-container .points-text {
		color: #803c00;
		margin-left: auto;
	}

	.rounded-progress {
		border-radius: 10px;
		/* Adjust as needed for the desired roundness */
		overflow: hidden;
		/* To ensure the inner part of the progress bar is rounded */
	}

	.foot {
		margin: 10px 10px 0px;
		height: 80px;
		background-size: cover;
		background-position: center;
		background-image: url('https://pic.imgdb.cn/item/66977e66d9c307b7e9233004.png');
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 22vh;
		flex-direction: column;
	}

	.title.data-v-197d1752 {
		font-size: 16px;
		/* Adjusted font size */
		/* font-weight: bold; */
		align-self: flex-start;
		margin-left: 17px;
	}

	.card.data-v-197d1752.data-v-197d1752 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 90%;
		border-radius: 8px;
		padding: 20px;
		background-color: #fff;
		margin: 0 10px;
	}

	.card-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.number {
		font-size: 20px;
		/* Adjusted font size */
	}

	.label {
		font-size: 14px;
		/* Adjusted font size */
		color: #666;
	}

	.mycard {
		background-color: white;
		height: 19vh;
	}

	.orders.data-v-197d1752 {
		border-radius: 10px;
		margin: 10px 10px 0px;
		height: 200px;
		background-color: white;
	}

	.header {
		height: 100px;
		background-image: url('https://pic.imgdb.cn/item/66977165d9c307b7e9041043.png');
		background-size: cover;
		background-position: center;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.text-and-image {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text-container {
		font-size: 20px;
		color: black;
		font-weight: bold;
	}

	.image-container {
		display: flex;
		align-items: center;
	}

	.image-container image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.card-container {
		display: flex;
		align-items: center;
		background-size: cover;
		background-position: center;
		padding: 10px;
		border-radius: 10px;
		margin: -10px 10px 0;
		background-image: url('https://pic.imgdb.cn/item/66977103d9c307b7e9031824.png');
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		justify-content: space-between;
	}

	.icon-and-text {
		display: flex;
		align-items: center;
	}

	.card-title {
		font-size: 14px;
		color: #803c00;
		font-weight: bold;
		margin-left: 5px;
	}

	.card-text-container {
		display: flex;
		align-items: center;
	}

	.card-text {
		font-size: 14px;
		color: #803c00;
	}
</style>